﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/Main.Master" AutoEventWireup="true"
    CodeBehind="ManageRoles.aspx.cs" Inherits="HRM.Web.master.ManageRoles" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%--<link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="../css/bootstrap/theme.bootstrap.css" rel="stylesheet" type="text/css" />

<script src="../js/bootstrap/jquery.tablesorter.js" type="text/javascript"></script>

<script src="../js/bootstrap/jquery.tablesorter.widgets.js" type="text/javascript"></script>

<link href="../css/bootstrap/jquery.tablesorter.pager.css" rel="stylesheet" type="text/css" />

<script src="../js/bootstrap/jquery.tablesorter.pager.js" type="text/javascript"></script>--%>
    <script id="js">

        $(function () {

            $.extend($.tablesorter.themes.bootstrap, {
                // these classes are added to the table. To see other table classes available,
                // look here: http://twitter.github.com/bootstrap/base-css.html#tables
                table: 'table table-bordered',
                caption: 'caption',
                header: 'bootstrap-header', // give the header a gradient background
                footerRow: '',
                footerCells: '',
                icons: '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
                sortNone: 'bootstrap-icon-unsorted',
                sortAsc: 'icon-chevron-up glyphicon glyphicon-chevron-up',     // includes classes for Bootstrap v2 & v3
                sortDesc: 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes classes for Bootstrap v2 & v3
                active: '', // applied when column is sorted
                hover: '', // use custom css here - bootstrap class may not override it
                filterRow: '', // filter row class
                even: '', // odd row zebra striping
                odd: ''  // even row zebra striping
            });

            // call the tablesorter plugin and apply the uitheme widget
            $("table").tablesorter({
                // this will apply the bootstrap theme if "uitheme" widget is included
                // the widgetOptions.uitheme is no longer required to be set
                theme: "bootstrap",

                widthFixed: true,

                headerTemplate: '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!

                // widget code contained in the jquery.tablesorter.widgets.js file
                // use the zebra stripe widget if you plan on hiding any rows (filter widget)
                widgets: ["uitheme", "filter", "zebra"],

                widgetOptions: {
                    // using the default zebra striping class name, so it actually isn't included in the theme variable above
                    // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
                    zebra: ["even", "odd"],

                    // reset filters button
                    filter_reset: ".reset"

                    // set the uitheme widget to use the bootstrap theme class names
                    // this is no longer required, if theme is set
                    // ,uitheme : "bootstrap"

                },

                headers: {
                    2: {
                        sorter: false,
                        filter: false
                    }
                }
            })

            .tablesorterPager({

                // target the pager markup - see the HTML block below
                container: $(".ts-pager"),

                // target the pager page select dropdown - choose a page
                cssGoto: ".pagenum",

                // remove rows from the table to speed up the sort of large tables.
                // setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
                removeRows: false,

                // output string - default is '{page}/{totalPages}';
                // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
                output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'

            });
        });
        
    </script>
    <style>
        .tablesorter thead .disabled
        {
            display: none;
        }
        .lightGreen
        {
            background-color: lightgreen;
        }
    </style>
   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
    <div class="row-fluid">
        <div class="alert alert-info" runat="server" id="divAlertDelete" visible="false">
            <asp:Literal ID="ltrMessageDelete" runat="server"></asp:Literal>
            <button type="button" class="close" data-dismiss="alert">
                &times;
            </button>
        </div>
        <div class="block">
            <div class="head">
                <h2>
                    View All Roles</h2>
                <ul class="buttons">
                    <li><a id="AddEdit" href="AddRoles.aspx?RoleID=0" >
                        <span class="i-plus-2"></span></a></li>
                </ul>
            </div>
            <div class="content np">
                <%--<asp:Repeater ID="rptRoles" runat="server" OnItemCommand="rptRoles_ItemCommand">
                    <HeaderTemplate>
                        <table cellpadding="0" cellspacing="0" width="100%" class="editable" id="allIncExample">
                            <thead>
                                <tr>
                                    <th width="50">
                                        Name
                                    </th>
                                    <th>
                                        Description
                                    </th>
                                    <th width="95">
                                        Action
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:Label ID="lblName" runat="server" Text='<%# Eval("RoleName")%>'></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description")%>'></asp:Label>
                            </td>
                            <td>
                                
                            </td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </tbody> </table>
                    </FooterTemplate>
                </asp:Repeater>--%>
                <asp:GridView ID="grdRoles" runat="server" ClientIDMode="Static" CssClass="tablesorter-bootstrap" DataKeyNames="ID"
                    AutoGenerateColumns="False" onrowcommand="grdRoles_RowCommand">
                    <Columns>
                       <%-- <asp:TemplateField>
                            <HeaderTemplate>
                                <asp:CheckBox runat="server" ID="cbSelectAll" ClientIDMode="Static" /><asp:Button ID="DeleteButton" OnClick="DeleteButton_Click"  CssClass="validate-skip"
                                   runat ="server" Text="Delete" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox runat="server" ID="cbSelect" name="cbSelect" ClientIDMode="Static" class="cbSelectRow" />
                            </ItemTemplate>
                        </asp:TemplateField>--%>
                        <asp:BoundField DataField="RoleName" HeaderText="RoleName" />
                        <asp:BoundField DataField="Description" HeaderText="Description" />
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Button ID="btnEdit" runat="server" CausesValidation="false" CommandArgument='<%# Eval("ID")%>'
                                    CommandName="EditCommand" CssClass="btn btn-primary edit validate-skip" Text="Edit" />
                                     <asp:Button ID="btnDelete" runat="server" CausesValidation="false" CommandArgument='<%# Eval("ID")%>'
                                    CommandName="DeleteCommand" CssClass="btn btn-danger remove validate-skip" Text="Delete" />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                <div id="pager" class="ts-pager form-horizontal">
                    <button type="button" class="btn first">
                        <i class="icon-step-backward glyphicon glyphicon-step-backward"></i>
                    </button>
                    <button type="button" class="btn prev">
                        <i class="icon-arrow-left glyphicon glyphicon-backward"></i>
                    </button>
                    <span class="pagedisplay"></span>
                    <!-- this can be any element, including an input -->
                    <button type="button" class="btn next">
                        <i class="icon-arrow-right glyphicon glyphicon-forward"></i>
                    </button>
                    <button type="button" class="btn last">
                        <i class="icon-step-forward glyphicon glyphicon-step-forward"></i>
                    </button>
                    <select class="pagesize input-mini" title="Select page size">
                        <option selected="selected" value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                    </select>
                    <select class="pagenum input-mini" title="Select page number">
                    </select>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
